<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Section - Add Teacher</title>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
<jsp:include page="../includeFiles.jsp" ></jsp:include>

<link rel="stylesheet" href="<%=request.getContextPath()%>/views/css/ui/jquery-ui-1.10.4.custom.min.css">
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.datepicker.js"></script>

<script>
	$(function() {
		$( "#teacher_dob" ).datepicker({
			dateFormat: 'yy-mm-dd'
		});
	});
	
	$(function() {
		$( "#teacher_doj" ).datepicker({
			dateFormat: 'yy-mm-dd'
		});
	});
</script>
</head>

<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkSectionRole.jsp" />

	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">

				<!-- Login -->
						<div id="login_content">
						<header>
							<h2>Add Teacher</h2>
						</header>
						
						<span class="error_msg">${sectionNotExists}</span>
						<span class="error_msg">${userExists}</span>
						<span class="error_msg">${teacherExists}</span>
						<span class="success_msg">${teacherAdded}</span>
						<span class="error_msg">${teacherNotAdded}</span>
						<span class="error_msg">${null_values}</span>
						<span class="error_msg">${validate_teacher_passwords}</span>
						<span class="error_msg">${validate_teacher_email}</span>
						<span class="error_msg">${validate_teacher_name}</span>
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All fields are required. You must select at least 1 from drop-down.</li>
								<li id="submit_name_error" class="submit_errors">Name must be between 2 to 50 characters, allowed characters:A-Za-z0-9</li>
								<li id="submit_email_error" class="submit_errors">Email-id is invalid.</li>
								<li id="submit_pass_error" class="submit_errors">Password : at least 8 characters, 1 upper-case, number & special character.</li>
								<li id="submit_pass_compare_error" class="submit_errors">Passwords must be similar.</li>
							</ul>
						</div>
						
						<form name="addTeacherForm" action="${pageContext.request.contextPath}/AddTeacherServlet" action="post" onsubmit="return checkFormErrors();">
							<!-- Hidden teacher id field -->
							<div>
								<input id="teacher_id" type="hidden">
								<input type="hidden"  id="action_type" name="action_type"value="create">
							</div>
							
							
							<!-- Teacher Name -->
							<div>
								<label>Name: <span class="error_msg">*</span></label>
								<input id="teacher_fname" name="teacher_fname" type="text" placeholder="First Name"  maxlength="32" tabindex="1">
							</div>
							<div id="name_error" class="error_info">
								<ul>
									<li id="name_empty" class="invalid">First name can't be empty.</li>
									<li id="name_length" class="invalid">Length must be between 2 to 32.</li>
									<li id="name_invalid" class="invalid">Only alphanumeric characters.</li>
								</ul>
							</div>
							<!-- Teacher Last Name -->
							<div>
								<label>Last Name: <span class="error_msg">*</span></label>
								<input id="teacher_lname" name="teacher_lname" type="text" placeholder="Last Name"  maxlength="32" tabindex="2">
							</div>
							
							<!-- Teacher Email -->
							<div>
								<label>Email ID: <span class="error_msg">*</span></label>
								<input id="teacher_email" name="teacher_email" type="email" placeholder="Email ID" maxlength="32" tabindex="3">
							</div>
							<!-- Email Validation error and success message area. -->
							<div id="email_error" class="error_info">
								<ul>
									<li id="email_empty" class="invalid">Email address cannot be empty.</li>
									<li id="email_invalid" class="invalid">Valid email address?</li>
								</ul>
							</div>
							<!-- Teacher Address -->
							<div>
								<label>Address: <span class="error_msg">*</span></label>
								<textarea id="teacher_address" name="teacher_address" placeholder="Address (Max 160 characters)" maxlength="160" tabindex="4" rows="3" style="resize: none;"></textarea>
							</div>
							
							<!-- Teacher Home No -->
							<div>
								<label>Home Phone No:</label>
								<input id="teacher_home_no" name="teacher_home_no" type="number" placeholder="Home Phone Number" maxlength="10" tabindex="5">
							</div>
							
							<!-- Teacher MObile -->
							<div>
								<label>Mobile: <span class="error_msg">*</span></label>
								<input id="teacher_mobile" name="teacher_mobile" type="number" placeholder="Mobile Number" maxlength="10" tabindex="6">
							</div>
							<div id="mobile_no_error" class="error_info">
								<ul>
									<li id="mobile_digits" class="invalid">Only digits are allowed.</li>
									<li id="mobile_length" class="invalid">Length must be 10.</li>
								</ul>
							</div>
							
							<!--  Teacher Gender -->
							
							<div>
								<label>Gender: <span class="error_msg">*</span></label>
								<select name="gender_select" id="gender_select" tabindex="7">
									<option value="">Select Gender
									<option name="Male" value="Male">Male
									<option name="Female" value="Female">Female
								</select>
							</div>
							
							<!--  Teacher dob -->							
							<div>
								<label>Date of Birth: <span class="error_msg">*</span></label>
								<input type="text" id="teacher_dob" name="teacher_dob" placeholder="Date" tabindex="8">
							</div>
							
							<!--  Teacher doj -->							
							<div>
								<label>Date of Joining: <span class="error_msg">*</span></label>
								<input type="text" id="teacher_doj" name="teacher_doj" placeholder="Date" tabindex="9">
							</div>
							
							<!-- Teacher Skills -->
							<div>
								<label>Teacher Skills: <span class="error_msg">*</span></label>
								<input id="teacher_skills" name="teacher_skills" type="text" placeholder="Skills" maxlength="50" tabindex="10">
							</div>
							
							<!-- Teacher Password -->
							<div>
								<label>Password: <span class="error_msg">*</span></label> 
								<input id="teacher_password" name="teacher_password" type="password" placeholder="Password" maxlength="32" tabindex="11">
							</div>
							<!-- Password Validation error and success message area. -->
							<div id="pass_error" class="error_info">
								<ul>
									<li id="letter" class="invalid">At least <strong>one letter</strong></li>
									<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
									<li id="number" class="invalid">At least <strong>one number</strong></li>
									<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
									<li id="character" class="invalid">At least <strong>one special character</strong></li>
								</ul>
							</div>
							<!-- Re-enter Password -->
							<div>
								<label>Confirm Password: <span class="error_msg">*</span></label> 
								<input id="teacher_repassword" name="teacher_repassword" type="password" placeholder="Re-enter Password" maxlength="32" tabindex="12">
							</div>
							<!-- Compare Passwords. -->
							<div id="compare_pass_error" class="error_info">
								<ul>
									<li id="compare_pass" class="invalid">Passwords must be similar & non-empty.</li>
								</ul>
							</div>
							<div>	
								<input type="submit" value="Add Teacher" class="button" tabindex="13">
								<!-- <input type="button" value="Cancel" class="button"> -->
							</div>
						</form>
					</div>
			
			</div>
		</div>

		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" ></jsp:include>

			<jsp:include page="sectionMenu.jsp" />
							
			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>
	<script type="text/javascript">
		$(function(){
			$("#teacherSettings").addClass("current_page_item");
		});
	</script>
	
	<script type="text/javascript">
	
	$(".submit_errors_msg").hide();
	$(".submit_errors").hide();
	
	function checkFormErrors(){
		if(isAnyFieldEmpty($('#teacher_fname'),$('#teacher_lname'),$('#teacher_email'),$('#teacher_address'),$('#teacher_mobile'),$('#gender_select'),$('#teacher_dob'),$('#teacher_doj'),$('#teacher_skills'),$('#teacher_password'),$('#teacher_repassword'))){
			return checkForm($('#submit_name_error'),$('#submit_email_error'),$('#submit_pass_error'),$('#submit_pass_compare_error'));
		}
		return false;
	}
	
	
	<!-- Email, Name and Password Validation Function Call in validate.js -->
		$("#teacher_email").keyup(function() {
			isEmailValid($("#teacher_email"));
		});	
		$("#teacher_fname").keyup(function() {
			isNameValid($("#teacher_fname"));
		});
		$("#teacher_mobile").keyup(function() {
			isMobileValid($("#teacher_mobile"));
		});
		$("#teacher_password").keyup(function() {
			isPasswordValid($("#teacher_password"));
		});
		$("#teacher_repassword").keyup(function() {
			isPasswordSame($("#teacher_password"),$("#teacher_repassword"));
		});
	</script>
	</body>
</html>